<template>
  <div class="page">
    <div class="block-form bg-white">
      <div class="pd">
        <textarea v-if="!isModel" type="text" placeholder="请输入作业内容"
          :auto-height="true"
          style="min-height:100px;"
          placeholder-style="color: #999;font-weight: bold;"
          :show-confirm-bar="false"
          v-model="contentBlock.value" maxlength="-1"/>
      </div>
      <div style="position: relative;">
        <blocks-editor @change="onBlocksChange" :fastReplyPicker="true"
          @fast-reply-pick="onFastReply"
          :value="uploadQueue"
          @upload-queue-change="onUploadQueueChange"></blocks-editor>
        <div style="position: absolute;left: 18px;bottom: 12px;" @tap="isNeedRedo = !isNeedRedo">
          <cbx :checked="isNeedRedo">&nbsp;&nbsp;仍需修改</cbx>
        </div>
      </div>
    </div>
    <div class="bg-white pd bd-b-light bd-t-light">
      <div class="weui-flex">
        <div class="weui-flex__item ta-l">已选择 {{checkedNumber}} 位同学</div>
        <div class=""><a @tap="onGoCheck">查看</a></div>
      </div>
    </div>
    <div class="fix-bottom">
      <notify-btn cls="ui btn primary no-rounder" :disabled="!isSaveAble" @hit="onSend">批量发送</notify-btn>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import BlocksEditor from '@/components/blocks-editor'
import NotifyBtn from '@/components/notify-btn'
import Cbx from '@/components/cbx'
import { mapActions, mapState, mapGetters } from 'vuex'
import base from '@/mixins/base'
import dayjs from 'dayjs'
import * as _app from '@/utils/app'
import * as _helper from '@/utils/helper'
import * as $comment from '@/api/comment'

export default {
  mixins: [base],
  data () {
    return {
      contentBlock: {
        id: _helper.genCmptNo(),
        type: 'text',
        value: ''
      },
      blocks: [],
      uploadQueue: [],
      isNeedRedo: false,
    }
  },
  components: {
    PageCommon,
    BlocksEditor,
    NotifyBtn,
    Cbx
  },
  computed: {
    ...mapGetters(['uploadingMediaNum', 'isModel']),
    ...mapGetters('member', [
      'members',
    ]),
    checkedNumber () {
      let t = 0
      this.members.forEach(n => {
        if (!n.checked) return
        t++
      })
      return t
    },
    checkedIds () {
      let t = []
      this.members.forEach(n => {
        t.push(n.id)
      })
      return t
    },
    isSaveAble () {
      if (this.uploadingMediaNum) return false
      if (!this.checkedNumber) return false
      if (!this.contentBlock.value && this.blocks.length === 0) return false
      return true
    }
  },
  methods: {
    onUploadQueueChange (queue) {
      this.uploadQueue = queue
      let t = 0
      queue.forEach(n => {
        if (n.status === 'temp') {
          t++
        }
      })
      this.setUploadingMediaNum(t)
    },
    ...mapActions([
      'setUploadingMediaNum',
    ]),
    async onSend(e) {
      try {
        let {taskId} = this.getParams()
        if (!this.isSaveAble) return
        let blocks = _app.getBlocks({contentBlock: this.contentBlock, blocks: this.blocks})
        await $comment.bulkCreateForTask({taskId, userIds: this.checkedIds, data: {blocks}, isNeedRedo: this.isNeedRedo})
        this.contentBlock.value = ''
        this.blocks = []
        this.uploadQueue = []
        this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '批量回复成功！')
        setTimeout(() => {
          wx.navigateBack({
            delta: 2
          })
        }, 2000)
      } catch (e) {
        this.$debug({err: e})
      }
    },
    onBlocksChange (blocks) {
      this.blocks = blocks
    },
    onFastReply (content) {
      this.contentBlock.value += content
    },
    onGoCheck () {
      wx.navigateBack()
    }
  }
}
</script>

<style scoped>
textarea {
}
i.icon-del {
  font-size: 24px;
  color: red;
}
</style>
